<template>
  <div class="reset-container">
    <div class="reset-form">
      <div class="form-title">
        <div class="t-tip">重设密码</div>
        <div class="t-tabs">
          <a class="mr16" href="javascript:;" :class="{'active': tabType == 1}" @click="getTabType(1)">手机号</a>
          <a href="javascript:;" :class="{'active': tabType == 2 || tabType == 3}" @click="getTabType(2)">账号</a>
        </div>
      </div>
      <div v-if="tabType == 1" class="form-box">
        <div class="box-input" :class="{'error': !verification.mobile}">
          <vue-country-intl
            v-model.trim="loginParams.areaCode"
            :show-label-img="false"
            :only-value="true"
            placeholder=""
            type="phone"
            @onChange="getChangeCountry"
          />
          <span class="line" />
          <input
            v-model.trim="loginParams.mobile"
            class="input-tel"
            type="text"
            placeholder="请输入手机号码"
            maxlength="11"
            @input="getInputChange"
            @keyup.13="getResetMobile"
          >
          <p v-if="!verification.mobile" class="error-tip">手机号格式不正确</p>
        </div>
        <div class="box-input" :class="{'error': verification.codeText}">
          <input
            v-model.trim="loginParams.code"
            class="input-code"
            type="text"
            placeholder="请输入验证码"
            @input="getCodeChange"
            @keyup.13="getResetMobile"
          >
          <span v-if="timeShow" class="input-send higt" @click="getSendCode">发送验证码</span>
          <span v-if="!timeShow" class="input-send higt count">重新获取({{ count }}秒)</span>
          <p class="error-tip">{{ verification.codeText }}</p>
        </div>
        <div class="box-input" :class="{'error': verification.passwordText}">
          <input
            v-model.trim="loginParams.password"
            class="input-code"
            :type="inputType"
            placeholder="请输入新密码"
            @input="getPasswordChange"
            @keyup.13="getResetMobile"
          >
          <span v-if="inputType == 'password'" class="input-send" @click="inputType = 'text'"><svg-icon icon-class="close-eyes" /></span>
          <span v-if="inputType == 'text'" class="input-send" @click="inputType = 'password'"><svg-icon icon-class="open-eyes" /></span>
          <p class="error-tip">{{ verification.passwordText }}</p>
        </div>
        <el-button class="box-btn" :loading="isResetMobile" @click="getResetMobile">登录</el-button>
        <a class="box-register" @click="getChangeType">已有账号？登录</a>
      </div>
      <div v-if="tabType == 2" class="form-box">
        <span class="box-z-title">请输入账号</span>
        <input
          v-model.trim="boothNo"
          class="box-z-account"
          type="text"
          placeholder="请输入格式如SH，TW的8位账号，不区分大小写"
          :class="{'error': verification.boothNo}"
          @input="getChangeBoothNo"
          @keyup.13="getNextTo"
        >
        <p v-if="verification.boothNo" class="error-tip-boot">{{ verification.boothNo }}</p>
        <el-button class="box-btn" :loading="isNextTo" @click="getNextTo">下一步</el-button>
        <a class="box-register" @click="getChangeType">已有账号？登录</a>
      </div>
      <div v-if="tabType == 3" class="form-box">
        <span class="box-z-info">账号号：{{ boothParams.imShowId }}</span>
        <span class="box-z-info">超管手机号：{{ mobileStar(boothParams.mobile) }}</span>
        <div class="box-input" :class="{'error': boothVerification.codeText}">
          <input
            v-model.trim="boothParams.code"
            class="input-code"
            type="text"
            placeholder="请输入验证码"
            @input="getBoothCodeChange"
            @keyup.13="getBoothNoSubmit"
          >
          <span v-if="timeShow" class="input-send" @click="getSendBoothCode">发送验证码</span>
          <span v-if="!timeShow" class="input-send count">重新获取({{ count }}秒)</span>
          <p v-if="boothVerification.codeText" class="error-tip">{{ boothVerification.codeText }}</p>
        </div>
        <div class="box-input" :class="{'error': boothVerification.passwordText}">
          <input
            v-model.trim="boothParams.password"
            class="input-code"
            :type="inputType"
            placeholder="请输入新密码"
            @input="getBoothPasswordChange"
            @keyup.13="getBoothNoSubmit"
          >
          <span v-if="inputType == 'password'" class="input-send" @click="inputType = 'text'"><svg-icon icon-class="open-eyes" /></span>
          <span v-if="inputType == 'text'" class="input-send" @click="inputType = 'password'"><svg-icon icon-class="close-eyes" /></span>
          <p v-if="boothVerification.passwordText" class="error-tip">{{ boothVerification.passwordText }}</p>
        </div>
        <el-button class="box-btn" :loading="isBoothNoSubmit" @click="getBoothNoSubmit">修改</el-button>
        <a class="box-register" @click="getChangeType">已有账号？登录</a>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api'
import VueCountryIntl from 'vue-country-intl'
import 'vue-country-intl/lib/vue-country-intl.css'
import { checkPhone, debounce, mobileStar, checkPassword } from '@/utils/validate'
export default {
  name: 'ResetAccount',
  components: { VueCountryIntl },
  data() {
    return {
      mobileStar,
      isNextTo: false,
      isResetMobile: false,
      isBoothNoSubmit: false,
      inputType: 'password',
      tabType: 1,
      loginParams: { // 验证码登录
        areaCode: '86', // 国际区号
        code: '', // 验证码
        mobile: '', // 手机号
        password: '', // 密码
        loginSource:'137'
      },
      verification: {
        mobile: true,
        codeText: '',
        passwordText: '',
        boothNo: ''
      },
      boothParams: { // 验证码登录
        areaCode: '+86', // 国际区号
        code: '', // 验证码
        email: '', // 邮箱
        mobile: '', // 手机号
        password: '', // 密码
        type: 2, // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
        username: '', // 用户名
        loginSource:'137'
      },
      boothVerification: {
        codeText: '',
        passwordText: ''
      },
      timeShow: true,
      count: '',
      timer: null,
      boothNo: ''
    }
  },
  methods: {
    getTabType(type) {
      const _this = this
      _this.tabType = type
      _this.loginParams = _this.$options.data().loginParams
      _this.verification = _this.$options.data().verification
    },
    getChangeType() {
      this.$emit('getChangeSignType', false)
    },
    getChangeCountry(data) {
      const _this = this
      _this.loginParams.areaCode = data.dialCode
    },
    getInputChange: debounce(function() {
      const _this = this
      _this.verification.mobile = checkPhone(_this.loginParams.mobile)
    }, 500),
    getCodeChange: debounce(function() {
      const _this = this
      if (_this.loginParams.code === '') {
        _this.verification.codeText = '请输入验证码'
      } else {
        _this.verification.codeText = ''
      }
    }, 100),
    getBoothCodeChange: debounce(function() {
      const _this = this
      if (_this.boothParams.code === '') {
        _this.boothVerification.codeText = '请输入验证码'
      } else {
        _this.boothVerification.codeText = ''
      }
    }, 100),
    getPasswordChange: debounce(function() {
      const _this = this
      if (_this.loginParams.password === '') {
        _this.verification.passwordText = '请输入验证码'
      } else if (!checkPassword(_this.loginParams.password)) {
        _this.verification.passwordText = '8-16位字符，至少包含数字 大小写字母 或特殊符号的任意三个'
      } else {
        _this.verification.passwordText = ''
      }
    }, 100),
    getBoothPasswordChange: debounce(function() {
      const _this = this
      if (_this.boothParams.password === '') {
        _this.boothVerification.passwordText = '请输入新密码'
      } else if (!checkPassword(_this.boothParams.password)) {
        _this.boothVerification.passwordText = '8-16位字符，至少包含数字 大小写字母 或特殊符号的任意三个'
      } else {
        _this.boothVerification.passwordText = ''
      }
    }, 100),
    getChangeBoothNo: debounce(function() {
      const _this = this
      const reg = /^(sh|SH|Sh|sH|TW|tw|Tw|tW)[0-9]{6}$/g
      if (_this.boothNo === '') {
        _this.verification.boothNo = '请输入展位号'
      } else if (!reg.test(_this.boothNo)) {
        _this.verification.boothNo = '请输入正确的展位号'
      } else {
        _this.verification.boothNo = ''
      }
    }, 100),
    async getSendCode() {
      const _this = this
      _this.verification.mobile = checkPhone(_this.loginParams.mobile)
      if (!_this.verification.mobile) return false
      const params = {
        areaCode: '+' + this.loginParams.areaCode,
        mobile: _this.loginParams.mobile,
        type: 2, // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      }

      await api.login.sendMobileCode(params)
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timeShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.timeShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    async getSendBoothCode() {
      const _this = this
      const params = {
        mobile: _this.boothParams.mobile,
        type: 2 // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      }
      await api.login.sendMobileCode(params)
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timeShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.timeShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    async getResetMobile() {
      const _this = this
      if (!_this.loginParams.mobile) {
        return _this.verification.mobile = false, false
      }
      if (!_this.loginParams.code) {
        return _this.verification.codeText = '请输入验证码', false
      }
      if (!_this.loginParams.password) {
        return _this.verification.passwordText = '请输入密码', false
      }
      _this.isResetMobile = true
      if (_this.loginParams.areaCode.indexOf('+') === -1) {
        _this.loginParams.areaCode = '+' + _this.loginParams.areaCode
      }
      const params = _this.loginParams
      try {
        await api.login.resetPassword(params)
        // 进入登录流程
        _this.isResetMobile = false
        _this.$router.push('/surey')
      } catch (error) {
        _this.isResetMobile = false
      }
    },
    async getNextTo() {
      const _this = this
      const reg = /^(sh|SH|Sh|sH|TW|tw|Tw|tW)[0-9]{6}$/g
      if (!_this.boothNo) return _this.verification.boothNo = '请输入展位号', false
      if (!reg.test(_this.boothNo)) return _this.verification.boothNo = '请输入正确的展位号', false
      const params = {
        companyAccount: _this.boothNo
      }
      try {
        _this.isNextTo = true
        const { data } = await api.login.getSuperMobile(params)
        if (data) {
          _this.tabType = 3
          _this.$set(_this.boothParams, 'mobile', data)
          _this.$set(_this.boothParams, 'username', _this.boothNo)
          _this.$set(_this.boothParams, 'imShowId', _this.boothNo)
        }
        _this.isNextTo = false
      } catch (error) {
        _this.isNextTo = false
      }
    },
    async getBoothNoSubmit() {
      const _this = this
      if (!_this.boothParams.code) {
        return _this.boothVerification.codeText = '请输入验证码', false
      }
      if (!_this.boothParams.password) {
        return _this.boothVerification.passwordText = '请输入密码', false
      }
      _this.isBoothNoSubmit = true
      const params = _this.boothParams
      try {
        await api.login.resetPassword(params)
        _this.isBoothNoSubmit = false
        this.$confirm('修改成功，去登录', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          closeOnClickModal: false,
          type: 'success'
        }).then(() => {
          this.$emit('getChangeSignType', false)
        }).catch(() => {
          this.$emit('getChangeSignType', false)
        })
      } catch (error) {
        _this.isBoothNoSubmit = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  input[type="password"]::-ms-reveal{
   display:none; // 隐藏input type=password时，浏览器自带的小眼睛
  }
  .reset-container {
    .reset-form {
      width: 480px;
      height: 510px;
      margin-top: 28px;
      background-color: #fff;
      box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
      padding: 30px 40px;
      box-sizing: border-box;

      .form-title {
        width: 100%;
        margin-bottom: 35px;
        @include flex(row, center, space-between);
        .t-tip {
          font-size: 24px;
          color: #202933;
          font-weight: bold;
          padding-bottom: 10px;
        }
        .t-tabs {
          width: 150px;
          @include flex(row, center, space-between);
          a {
            display: inline-block;
            padding-bottom: 10px;
            font-size: 20px;
            color: #7E8790;
            position: relative;
            font-weight: bold;

            &.active {
              color: #000;

              &::after {
                content: '';
                width: 60px;
                height: 4px;
                background: #0C7FF2;
                position: absolute;
                left: 50%;
                bottom: 0;
                margin-left: -30px;
              }
            }
          }
        }
      }
      .form-box {
        width: 400px;
        position: relative;

        .box-input {
          width: 100%;
          height: 54px;
          background: #F7F8FA;
          border: 1px solid #F7F8FA;
          margin-bottom: 34px;
          padding: 18px 24px 18px 12px;
          box-sizing: border-box;
          position: relative;
          @include flex(row, center, space-between);

          &.error {
            border: 1px solid #E53917;

            .error-tip {
              position: absolute;
              bottom: -25px;
              left: 0;
              font-size: 12px;
              color: #E53917;

              &>a {
                font-size: 12px;
                color: #4F5862;
                text-decoration: underline;
              }
            }
          }

          .input-num {
            font-size: 16px;
            color: #000;
            margin-right: 18px;
            line-height: 1;
          }
          &::v-deep .vue-country-intl{
            width: 50px;
            font-size: 16px;
            color: #000;
            line-height: 1;

            .vue-country-list-wrap {
              width: 500px;
            }

            .country-intl-input-wrap {
              border: none;
              border-radius: 0;

              .dropdown-flag {
                display: none;
              }

              .country-intl-input {
                padding: 0;
                height: auto;
                background: #F7F8FA;
              }

              .country-intl-label {
                padding: 0;
                background: transparent;
                height: inherit;
                line-height: 1;
                font-size: 16px;
              }
            }
          }
          .line {
            width: 1px;
            height: 18px;
            display: inline-block;
            vertical-align: middle;
            background-color: rgba(185, 192, 199, .4);
          }
          .input-tel {
            width: 87%;
            padding-left: 15px;
            position: relative;
            background: #F7F8FA;
            list-style: none;
            border: none;
            outline: none;
            color: #000;

            ::-webkit-input-placeholder, ::-moz-placeholder, -ms-input-placeholder {
              color: #B9C0C7;
            }
          }
          .input-code {
            width: 66%;
            position: relative;
            background: #F7F8FA;
            list-style: none;
            border: none;
            outline: none;
            color: #000;
            margin-left: 5px;

            ::-webkit-input-placeholder, ::-moz-placeholder, -ms-input-placeholder {
              color: #B9C0C7;
            }
          }
          .input-send {
            width: 33%;
            display: block;
            text-align: right;
            color: #74808B;
            font-size: 16px;
            cursor: pointer;

            &.higt {
              color: #74808B;
            }

            &:hover {
              opacity: .8;
            }
          }
        }
        .box-read {
          width: 100%;
          height: 20px;
          color: #7E8790;
          font-size: 16px;
          margin: 20px 0;
          @include flex(row, center, flex-end);
        }
        .box-btn {
          width: 100%;
          padding: 16px 0 !important;
          background: #1E84FC;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 1;
          margin-bottom: 32px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: .2s;

          &:hover {
            opacity: .8;
          }
        }
        .box-register {
          width: 100%;
          display: block;
          font-size: 16px;
          color: #0C7FF2;
          text-align: center;
        }
        .box-z-title {
          font-size: 16px;
          color: #000;
          line-height: 1;
          margin: 0 0 25px;
          display: block;
        }
        .box-z-account {
          width: 100%;
          display: block;
          border: none;
          list-style: none;
          outline: none;
          padding: 18px 17px;
          background: #F7F8FA;
          border: 1px solid #F7F8FA;
          font-size: 16px;
          color: #333;
          margin-bottom: 167px;

          ::-webkit-input-placeholder, ::-moz-placeholder, -ms-input-placeholder {
            color: #B9C0C7;
          }
          &.error {
            border: 1px solid #E53917;
          }
        }
        .error-tip-boot {
          position: absolute;
          top: 105px;
          left: 0;
          font-size: 12px;
          color: #E53917;
        }
        .box-z-info {
          font-size: 16px;
          color: #000;
          line-height: 1;
          display: block;
          margin-bottom: 20px;

          &:nth-child(2) {
            margin-bottom: 32px;
          }
        }
      }
    }
  }
</style>
